<script setup>
import { ref } from 'vue'
import VideoCard from './VideoCard.vue'

const props = defineProps({
  videos: {
    type: Array,
    required: true
  }
})

// 用于跟踪卡片索引，为了动画效果
const cardIndex = ref(0)
</script>

<template>
  <div class="recommendations-section">
    <h2 class="section-title">
      <span class="title-icon">📺</span>
      相关推荐
    </h2>
    
    <div class="videos-grid">
      <VideoCard 
        v-for="(video, index) in videos" 
        :key="video.id" 
        :video="video" 
        :index="index"
      />
    </div>
  </div>
</template>

<style scoped>
.recommendations-section {
  margin-top: 40px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 3px;
}

.title-icon {
  font-size: 1.3em;
}

/* 视频卡片网格布局 - 优化为视频样式显示 */
.videos-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  justify-content: start;
}

/* 响应式设计 - 不同屏幕尺寸下的视频卡片布局 */
@media (max-width: 1200px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .recommendations-section {
    padding: 16px;
    margin-top: 32px;
  }
  
  .section-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  
  .section-title {
    font-size: 18px;
  }
}
</style>